<template>
  <div class="fixwrap">
    <div class="head">
      <div class="info">
        <img
          src="../assets/logo.png"
          alt=""
          style="margin-top: 8px; height: 30px"
        />
        <ul>
          <li>
            <router-link to="/">
              <el-icon><House color="red" /></el-icon>
              商场首页
            </router-link>
          </li>
          <li>
            <router-link to="/person-center">
              <el-icon><User color="red" /></el-icon>
              个人中心
            </router-link>
          </li>
          <li>
            <router-link to="/shop-car">
              <el-icon color="red">
                <ShoppingCart />
              </el-icon>
              购物车
            </router-link>
          </li>
          <!-- <li><a href="./list.html">商品列表</a></li> -->
          <li v-if="userInfo?.role === 1">
            <router-link to="/management">
              <el-icon><SetUp color="red" /></el-icon>
              管理
            </router-link>
          </li>
          <li v-if="!userInfo?.userCode">
            <router-link to="/login">登录</router-link>
          </li>
          <li v-if="userInfo?.userCode">
            <span style="cursor: pointer" @click="logout()">退出登录</span>
          </li>

          <li>
            <el-icon @click="showDrawer" color="red"><Bell /></el-icon>
          </li>
        </ul>
      </div>
      <div v-if="hasSearch" class="head-search">
        <el-input
          v-model="searchInput"
          class="w-50 m-2"
          size="large"
          placeholder="输入关键词搜索"
          :prefix-icon="Search"
        />
        <el-button class="search-button" @click="search">搜 索</el-button>
      </div>
      <el-drawer
        v-model="drawerVisible"
        title="公告"
        :before-close="beforeDrawerClose"
        @close="closeDrawer"
        :append-to-body="true"
      >
        <!-- 抽屉内容 -->
        <el-button
          v-if="userInfo.role === 1"
          type="primary"
          @click="addSup"
          style="margin-bottom: 10px"
        >
          添加
        </el-button>
        <!-- 展示 -->
        <div class="table">
          <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
            height="450px"
          >
            <el-table-column prop="title" label="公告内容"></el-table-column>
            <el-table-column prop="creator" label="创建者"></el-table-column>
            <el-table-column
              width="120"
              prop="createTime"
              label="创建时间"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="120"
              v-if="userInfo.role === 1"
            >
              <template #default="scope">
                <el-button
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="showUpdateDialog(scope.row)"
                />
                <el-popconfirm
                  title="你确定删除吗?"
                  @confirm="deleteById(scope.row.id)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                >
                  <template #reference>
                    <el-button :icon="Delete" circle />
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog
          :title="type == 'create' ? '添加公告' : '编辑公告'"
          v-model="addDialogFormVisible"
          width="30%"
          center
        >
          <el-form :model="addform" :rules="addrules" ref="ruleform">
            <el-form-item
              label="公告内容"
              :label-width="formLabelWidth"
              prop="title"
            >
              <el-input v-model="addform.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </span>
          </template>
        </el-dialog>
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import { Search, House, User, Delete, Edit } from '@element-plus/icons-vue'
import { create, deleteNotice, getNotice, updateNotice } from '../api/notice.js'
</script>

<script>
import { ref } from 'vue'
import { getNotice, create, deleteNotice, updateNotice } from '../api/notice.js'
import dayjs from 'dayjs'
export default {
  props: ['hasSearch', 'classificationId', 'searchGoods'],
  data() {
    return {
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      drawerVisible: false,
      searchInput: '',
      addDialogFormVisible: false,
      type: 'create',
      tableData: [],
      total: 0,
      queryInfo: {
        pageNum: 1,
        pageSize: 20
      },
      addform: {
        createTime: '',
        creator: '',
        title: ''
      },
      addrules: {
        title: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    search() {
      this.searchGoods(this.classificationId, this.searchInput)
    },

    showDrawer() {
      this.drawerVisible = !this.drawerVisible
    },
    searchNotice() {
      getNotice(this.searchInput).then((res) => {})
    },
    addSup() {
      this.addDialogFormVisible = true
      this.type = 'create'
      this.addform = {}
    },
    showUpdateDialog(currentData) {
      this.type = 'update'
      this.addform = { ...currentData }
      this.addDialogFormVisible = true
    },
    handleSubmit() {
      if (this.type === 'create') {
        create({ ...this.addform, creator: this.userInfo.userName }).then(
          () => {
            this.addDialogFormVisible = false
            this.getNoticeList()
          }
        )
      } else {
        const param = { ...this.addform, creator: this.userInfo.userName }
        delete param.createTime
        updateNotice(param).then(() => {
          this.addDialogFormVisible = false
          this.getNoticeList()
        })
      }
    },
    getNoticeList() {
      getNotice(this.queryInfo).then((res) => {
        this.tableData = res.records.map((item) => {
          return {
            ...item,
            createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          }
        })
      })
    },
    deleteById(id) {
      deleteNotice(id).then(() => {
        this.getNoticeList()
        ElMessage.success('删除成功！')
      })
    },
    logout() {
      localStorage.removeItem('user_info')
      this.$router.push('/login')
    }
  },
  created() {
    this.getNoticeList()
  }
}
</script>

<style lang="less" scoped>
// * {
//   padding: 0;
//   margin: 0;
// }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 28px;
}
.fixwrap {
  // position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 99999;
}

.head {
  position: relative;
  // z-index: 9999;
  color: #9c9c9c;
  // background: #f5f5f5;
  background: #fff;
  li {
    padding: 2px 4px;
  }
  .head-search {
    width: 1100px;
    margin: auto;
    padding: 10px 0;
    position: relative;
    /deep/ .el-input__wrapper {
      border-radius: 44px;
      border-color: #ff0000;
      box-shadow: none;
      border: 2px solid #ff0000;
    }
  }
}
.head .info {
  display: flex;
  width: 1100px;
  justify-content: space-between;
  margin: auto;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
}

.head a {
  text-decoration: none;
}

.head .logo img {
  width: 50px;
}

.search-button {
  position: absolute;
  top: 14px;
  right: 4px;
  background: linear-gradient(to right, #ff0000, #fc7544);
  padding: 14px;
  border-radius: 18px;
  border: none;
  color: #fff;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  height: 36px;
  font-weight: 600;
  font-size: 16px;
}
.custom-input .el-input__prefix i {
  color: red; /* 自定义图标颜色，这里设置为红色 */
}
.el-drawer__header {
  margin-bottom: 0;
}
</style>
